<template>
  <view class="flex-row justify-between bottom-tabbar">
    <view class="flex-col items-center equal-division-item" @click="switchTab(1)">
      <!-- 选中样式 -->
      <image
        class="image"
        v-if="props.current === 1"
        src="https://ide.code.fun/api/image?token=67701c8cdefdb100111108c2&name=d9c203749f0b70a7a8ba76d3e4c5bf39.png"
      />
      <!-- 普通样式 -->
      <image
        class="image"
        v-else
        src="https://ide.code.fun/api/image?token=67701c8cdefdb100111108c2&name=033c66087bbc6e4f09f8f7b17c9de772.png"
      />
      <text :class="['mt-5', 'font', props.current === 1 ? 'text' : '']">首页</text>
    </view>
    <view class="flex-col items-center equal-division-item" @click="switchTab(2)">
      <!-- 选中样式 -->
      <view v-if="props.current === 2" class="flex-col justify-start items-center relative group_2">
        <image
          class="image_6"
          src="https://ide.code.fun/api/image?token=67701c8cdefdb100111108c2&name=a81f5fa613e8eacf14b850346fffb897.png"
        />
        <image
          class="image_5 pos_4"
          src="https://ide.code.fun/api/image?token=67701c8cdefdb100111108c2&name=f2182a3515c11588dfce503356e90f29.png"
        />
        <image
          class="image_2 pos"
          src="https://ide.code.fun/api/image?token=67701c8cdefdb100111108c2&name=c57e36318c0a161db08238b58506cbbe.png"
        />
        <image
          class="image_3 pos_3"
          src="https://ide.code.fun/api/image?token=67701c8cdefdb100111108c2&name=ef002f713fee84b080a7c3b9e42dbfcd.png"
        />
        <image
          class="image_5 pos_5"
          src="https://ide.code.fun/api/image?token=67701c8cdefdb100111108c2&name=a830d323c90dee7d3b9b62bb36dfc868.png"
        />
        <image
          class="image_2 pos_2"
          src="https://ide.code.fun/api/image?token=67701c8cdefdb100111108c2&name=3b22b117aa6650bb257c65b08fffd95a.png"
        />
      </view>
      <!-- 普通样式 -->
      <image
        class="image"
        v-else
        src="https://ide.code.fun/api/image?token=67701c8cdefdb100111108c2&name=5ad14358cb337597b09b247fedb4bd1f.png"
      />
      <text :class="['mt-4', 'font', props.current === 2 ? 'text' : '']">圈子</text>
    </view>
    <view class="flex-col items-center equal-division-item" @click="switchTab(3)">
      <!-- 选中样式 -->
      <image
        v-if="props.current === 3"
        class="image"
        src="https://ide.code.fun/api/image?token=67701c8cdefdb100111108c2&name=655b6f43914903a16af672379088aa41.png"
      />
      <!-- 普通样式 -->
      <view v-else class="flex-col group_3">
        <image
          class="self-center image_4"
          src="https://ide.code.fun/api/image?token=67701c8cdefdb100111108c2&name=3bf6b5e7802776f6231fed57730ac84e.png"
        />
        <view class="self-stretch group_4 mt-1"></view>
      </view>
      <text :class="['mt-6', 'font', props.current === 3 ? 'text' : '']">我的</text>
    </view>
  </view>
</template>
<script lang="ts" setup>
  import { defineProps, ref, defineEmits, watch } from 'vue'

  // 定义 props
  const props = defineProps<{
    current: number | string
    backgroundColor: string
    color: string
    tintColor: string
  }>()

  const emit = defineEmits<{
    (e: 'click', index: number): void
  }>()

  const switchTab = (index: number) => {
    if (index === 1) {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
    if (index === 2) {
      uni.switchTab({
        url: '/pages/circleDynamics/index'
      })
    }
    if (index === 3) {
      uni.switchTab({
        url: '/pages/personalCenter/index'
      })
    }
    // emit('click', index)
  }
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
